import React from "react";
import { Plus, Trash2 } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
const GroundingWireEditor = ({ items = [], onUpdate }) => {
  // 添加条目时生成唯一ID
  const handleAddItem = () => {
    onUpdate([
      ...items,
      {
        id: Date.now().toString(), // 新增：添加唯一ID
        position: "",
        specification: "不小于25mm²",
        installationMethod: "专用线夹",
      },
    ]);
  };

  const handleUpdateItem = (index, field, value) => {
    const newItems = [...items];
    newItems[index][field] = value;
    onUpdate(newItems);
  };

  const handleRemoveItem = (index) => {
    onUpdate(items.filter((_, i) => i !== index));
  };

  return (
    <div className="space-y-3">
      <Label>接地线装设位置模板</Label>
      {items.map((item, index) => (
        <div
           key={item.id} 
          className="grid grid-cols-1 md:grid-cols-4 gap-2 p-3 bg-white rounded-lg border items-center"
        >
          <Input
            value={item.position || ""}
            onChange={(e) =>
              handleUpdateItem(index, "position", e.target.value)
            }
            placeholder="装设位置"
            className="md:col-span-2"
          />
          <Input
            value={item.specification || ""}
            onChange={(e) =>
              handleUpdateItem(index, "specification", e.target.value)
            }
            placeholder="规格"
          />
          <div className="flex items-center gap-2">
            <Input
              value={item.installationMethod || ""}
              onChange={(e) =>
                handleUpdateItem(index, "installationMethod", e.target.value)
              }
              placeholder="装设方式"
            />
            <Button
              variant="ghost"
              size="icon"
              onClick={() => handleRemoveItem(index)}
              className="text-red-500 hover:text-red-700 shrink-0"
            >
              <Trash2 className="w-4 h-4" />
            </Button>
          </div>
        </div>
      ))}
      <Button
        variant="outline"
        size="sm"
        onClick={handleAddItem}
        className="bg-white"
      >
        <Plus className="w-4 h-4 mr-2" /> 添加接地线
      </Button>
    </div>
  );
};

export default GroundingWireEditor;
